import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {},
    state: {
        // 定义应用的初始状态
        count: 0,
        userInfo: null,
        productList: []
    },
    mutations: {
        // 定义修改状态的方法
        increment(state) {
            state.count++
        },
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo
        },
        setProductList(state, productList) {
            state.productList = productList
        }
    },
    actions: {
        // 处理异步操作来间接修改状态
        fetchUserInfo({ commit }) {
            // 这里模拟异步获取用户信息，实际可替换为网络请求等操作
            setTimeout(() => {
                const userInfo = { name: 'John', age: 30 }
                commit('setUserInfo', userInfo)
            }, 1000)
        },
        fetchProductList({ commit }) {
            // 假设通过网络请求获取商品列表数据
            return axios.get('/api/products').then((response) => {
                commit('setProductList', response.data)
            })
        }
    },
    getters: {
        // 用于从已有状态派生新的数据
        getCountDouble: (state) => {
            return state.count * 2
        },
        getUserFullName: (state) => {
            return state.userInfo ? `${state.userInfo.name} ${state.userInfo.lastName}` : ''
        }
    }
})
